<!DOCTYPE html>
<html lang="en">
<head>
    <#include "/WEB-INF/views/common/meta.html" />
    <title>设备监控</title>
    <#include "/WEB-INF/views/common/css.html"/>
    <link rel="stylesheet" type="text/css" href="/static/themes/css/login.css"/>
</head>
<body>
<header class="mui-bar mui-bar-nav bg-blue">
    <h1 class="mui-title">设备监控</h1>
</header>

<div class="mui-content">
    <div class="mui-card-content">
        <img style="width:100%" src="/static/themes/images/banner.png">
    </div>
    <form id='login-form' class="mui-input-group">
        <div class="mui-input-row">
            <label>账号</label>
            <input id='userName' type="text" class="mui-input-clear mui-input" placeholder="请输入账号">
        </div>
        <div class="mui-input-row">
            <label>密码</label>
            <input id='password' type="password" class="mui-input-clear mui-input" placeholder="请输入密码">
        </div>
    </form>
    <!-- <form class="mui-input-group">
        <ul class="mui-table-view mui-table-view-chevron">
            <li class="mui-table-view-cell">
                自动登录
                <div id="autoLogin" class="mui-switch">
                    <div class="mui-switch-handle"></div>
                </div>
            </li>
        </ul>
    </form> -->
    <div class="mui-content-padded">
        <button id='login' class="mui-btn mui-btn-block mui-btn-primary" onclick="login();">登录</button>
        <div class="link-area">
            <!-- <a id='reg'>注册账号</a> <span class="spliter">|</span>
            <a id='forgetPassword'>忘记密码</a>-->
        </div>
    </div>
    <div class="mui-content-padded oauth-area">

    </div>
</div>
</body>
<#include "/WEB-INF/views/common/js.html"/>
<script type="text/javascript">
    function login() {
        store.set("userName", $("#userName").val());
        store.set("password", $("#password").val());
        $.post("/user/ajaxLogin", {
            userName: $("#userName").val(),
            password: $("#password").val()
        }, function (result) {
            if (result.success) {
                window.location.href = "/";
            } else {
                alert(result.message);
            }
        }, "json");
    }

    $(function () {
        $("#userName").val(store.get("userName"));
        $("#password").val(store.get("password"));
        $('body').bind('keyup', function (event) {
            if (event.keyCode == "13") {
                login();
            }
        });
    });
</script>
</html>